<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>css fix table header</title>
		<style type="text/css">
			body {
				display: grid;
				place-items: center;
				height: 100vh;
				margin: 0;
				background-color: #fff;
			}

			table {
				font-family: "Fraunces", serif;
				font-size: 125%;
				white-space: nowrap;
				margin: 0;
				border: none;
				border-collapse: separate;
				border-spacing: 0;
				table-layout: fixed;
				border: 1px solid black;
			}

			table td,
			table th {
				border: 1px solid black;
				padding: 0.5rem 1rem;
			}

			table thead th {
				padding: 3px;
				position: sticky;
				top: 0;
				z-index: 1;
				width: 25vw;
				background: white;
			}

			table td {
				background: #fff;
				padding: 4px 5px;
				text-align: center;
			}

			table tbody th {
				font-weight: 100;
				font-style: italic;
				text-align: left;
				position: relative;
			}

			table thead th:first-child {
				position: sticky;
				left: 0;
				z-index: 2;
			}

			table tbody th {
				position: sticky;
				left: 0;
				background: white;
				z-index: 1;
			}

			caption {
				text-align: left;
				padding: 0.25rem;
				position: sticky;
				left: 0;
			}

			[role="region"][aria-labelledby][tabindex] {
				width: 450px;
				height: 400px;
				overflow: auto;
				box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.5);
				outline: 0;
			}
		</style>
	</head>

	<body>

		<div role="region" aria-labelledby="caption" tabindex="0">
			<table>
				<thead>
					<tr>

						<th>1</th>
						<th>2</th>
						<th>3</th>
						<th>4</th>
						<th>5</th>
						<th>6</th>
						<th>7</th>
						<th>8</th>
						<th>9</th>
						<th>Runs</th>
					</tr>
				</thead>
				<tbody>
					<tr>

						<td>2</td>
						<td>0</td>
						<td>4</td>
						<td>1</td>
						<td>0</td>
						<td>3</td>
						<td>0</td>
						<td>3</td>
						<td>4</td>
						<td>17</td>
					</tr>
					<tr>

						<td>0</td>
						<td>2</td>
						<td>3</td>
						<td>1</td>
						<td>3</td>
						<td>4</td>
						<td>3</td>
						<td>2</td>
						<td>4</td>
						<td>22</td>
					</tr>
					<tr>

						<td>0</td>
						<td>4</td>
						<td>3</td>
						<td>0</td>
						<td>2</td>
						<td>0</td>
						<td>4</td>
						<td>3</td>
						<td>4</td>
						<td>20</td>
					</tr>
					<tr>

						<td>1</td>
						<td>4</td>
						<td>1</td>
						<td>2</td>
						<td>1</td>
						<td>0</td>
						<td>3</td>
						<td>1</td>
						<td>3</td>
						<td>16</td>
					</tr>
					<tr>

						<td>4</td>
						<td>4</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>2</td>
						<td>4</td>
						<td>0</td>
						<td>0</td>
						<td>14</td>
					</tr>
					<tr>

						<td>2</td>
						<td>2</td>
						<td>1</td>
						<td>1</td>
						<td>2</td>
						<td>2</td>
						<td>3</td>
						<td>0</td>
						<td>4</td>
						<td>17</td>
					</tr>
					<tr>

						<td>3</td>
						<td>3</td>
						<td>0</td>
						<td>2</td>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>1</td>
						<td>19</td>
					</tr>
					<tr>

						<td>3</td>
						<td>1</td>
						<td>0</td>
						<td>0</td>
						<td>2</td>
						<td>2</td>
						<td>4</td>
						<td>4</td>
						<td>2</td>
						<td>18</td>
					</tr>
					<tr>

						<td>4</td>
						<td>2</td>
						<td>3</td>
						<td>2</td>
						<td>2</td>
						<td>2</td>
						<td>1</td>
						<td>2</td>
						<td>2</td>
						<td>20</td>
					</tr>
					<tr>

						<td>0</td>
						<td>4</td>
						<td>4</td>
						<td>4</td>
						<td>2</td>
						<td>0</td>
						<td>4</td>
						<td>0</td>
						<td>4</td>
						<td>22</td>
					</tr>
					<tr>

						<td>0</td>
						<td>1</td>
						<td>0</td>
						<td>2</td>
						<td>0</td>
						<td>3</td>
						<td>3</td>
						<td>4</td>
						<td>4</td>
						<td>17</td>
					</tr>
					<tr>

						<td>2</td>
						<td>3</td>
						<td>0</td>
						<td>1</td>
						<td>0</td>
						<td>0</td>
						<td>3</td>
						<td>1</td>
						<td>2</td>
						<td>12</td>
					</tr>
					<tr>

						<td>4</td>
						<td>0</td>
						<td>3</td>
						<td>2</td>
						<td>4</td>
						<td>3</td>
						<td>4</td>
						<td>2</td>
						<td>4</td>
						<td>26</td>
					</tr>
					<tr>

						<td>1</td>
						<td>4</td>
						<td>0</td>
						<td>1</td>
						<td>0</td>
						<td>2</td>
						<td>3</td>
						<td>2</td>
						<td>0</td>
						<td>13</td>
					</tr>
					<tr>

						<td>2</td>
						<td>0</td>
						<td>0</td>
						<td>2</td>
						<td>1</td>
						<td>1</td>
						<td>3</td>
						<td>3</td>
						<td>2</td>
						<td>14</td>
					</tr>
					<tr>

						<td>0</td>
						<td>0</td>
						<td>2</td>
						<td>4</td>
						<td>4</td>
						<td>2</td>
						<td>1</td>
						<td>1</td>
						<td>2</td>
						<td>16</td>
					</tr>
					<tr>

						<td>3</td>
						<td>3</td>
						<td>0</td>
						<td>2</td>
						<td>3</td>
						<td>0</td>
						<td>1</td>
						<td>3</td>
						<td>2</td>
						<td>17</td>
					</tr>
					<tr>

						<td>1</td>
						<td>1</td>
						<td>0</td>
						<td>1</td>
						<td>2</td>
						<td>0</td>
						<td>1</td>
						<td>4</td>
						<td>4</td>
						<td>14</td>
					</tr>
					<tr>

						<td>4</td>
						<td>0</td>
						<td>1</td>
						<td>2</td>
						<td>1</td>
						<td>1</td>
						<td>4</td>
						<td>3</td>
						<td>3</td>
						<td>19</td>
					</tr>
					<tr>

						<td>4</td>
						<td>0</td>
						<td>1</td>
						<td>0</td>
						<td>1</td>
						<td>0</td>
						<td>1</td>
						<td>3</td>
						<td>3</td>
						<td>13</td>
					</tr>
					<tr>

						<td>2</td>
						<td>4</td>
						<td>2</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>3</td>
						<td>0</td>
						<td>1</td>
						<td>21</td>
					</tr>
					<tr>

						<td>0</td>
						<td>0</td>
						<td>4</td>
						<td>3</td>
						<td>1</td>
						<td>4</td>
						<td>3</td>
						<td>0</td>
						<td>0</td>
						<td>15</td>
					</tr>
				</tbody>
			</table>
		</div>

	</body>
	<script>
		
	</script>

</html>
<!--
文章来源：CSS实现：固定Table表头和第一列
http://www.webkaka.com/tutorial/html/2021/0630123/
//-->
